@import '../../assets/styles/vars.less';

.container {
  padding-bottom: @base-size * 6;

  .img-wrapper {
    height: 250PX;
    background-color: @bg-color-light;
    overflow: hidden;
  }

  .title-wrapper {
    padding: 0 @base-size * 2;
    margin: @base-size 0 @base-size * 2;

    .title {
      .base-title;
      margin-bottom: @base-size * 2;
      height: auto;
      line-height: @base-size * 3;
      font-size: 20PX;
    }

    .meta {
      display: flex;
      margin-bottom: @base-size * 2;

      .tags-wrapper {
        flex: 1;
      }

      .price-wrapper {
        flex: 1;
        color: @red;
        font-weight: bold;

        .price {
          line-height: 20PX;
          font-size: 20PX;
        }

        .unit {
          line-height: @text-size-mini;
          font-size: @text-size-mini;
        }
      }
    }
  }

  .base-info {
    display: flex;
    flex-wrap: wrap;

    .attr {
      flex: 0 0 100%;
      display: flex;
      margin-bottom: @base-size;

      .attr-key {
        width: 80Px;
        color: @text-color-sub;
        overflow: hidden;
        white-space: nowrap;
      }

      .attr-value {
      }

      &:last-child {
        flex: 0 0 100%;
        margin-bottom: 0;
      }
    }
  }

  .foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: @base-size;
    text-align: center;

    .icon-wrapper {
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 @base-size * 3;
      height: @base-size * 6;
      color: #fff;
      background-color: @theme-color;
      opacity: 0.9;
      border-radius: @base-size * 6;

      .iconfont {
        width: 50Px;
        font-size: 28Px;
      }
    }
  }
}
